var color = document.querySelector('.color');  //获取线条
var btn1 = document.querySelector('.btn'); //获取前一张按钮
var next = document.querySelector('.next'); //获取下一张按钮
var one = document.querySelectorAll('.one'); //获取圆圈
// console.log(one)

let sum = 1;
btn1.onclick = function(){
    sum--;
    updata();
}
next.onclick = function() {
    sum++;
    // console.log(sum)
    updata();
}
function updata(){
    for(var i = 0;i < one.length; i++){
        if(i<sum){
            one[i].classList.add('active');
        }else{
            one[i].classList.remove('active');
        }
    }
    color.style.width=(sum-1)/(one.length-1)*100+"%";
    if(sum===1){
        btn1.disabled=true;
    }else if(sum===one.length){
        next.disabled=true;
    }else{
        btn1.disabled=false;
        next.disabled=false;
    }
}